<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view>
    <wd-navbar title="我的" fixed placeholder safeAreaInsetTop></wd-navbar>
    <view class="flex card-shadow">
      <wd-row custom-class="all-row">
        <wd-col :span="1"></wd-col>
        <wd-col :span="7">
          <wd-img round :width="100" :height="100" :src="imgSrc" :enable-preview="true" />
        </wd-col>
        <wd-col :span="16" custom-class="all-col">
          <wd-row custom-class="all-row">
            <wd-col :span="17">
              <view class="text-size-xl user-name mb-2">{{ userName }}</view>
              <view>{{ userRole }}</view>
            </wd-col>
            <wd-col :span="6">
              <wd-button
                type="icon"
                icon="setting"
                custom-class="icon-button"
                @click="toSetting"
              ></wd-button>
            </wd-col>
            <wd-col :span="1"></wd-col>
          </wd-row>
        </wd-col>
      </wd-row>
    </view>

    <view class="mt-6 card-shadow">
      <wd-grid clickable>
        <wd-grid-item
          link-type="navigateTo"
          url="/pages/history/benchmarks"
          icon="chart"
          text="测评记录"
        />
        <wd-grid-item
          link-type="navigateTo"
          url="/pages/history/consultations"
          icon="history"
          text="咨询记录"
        />
        <wd-grid-item
          link-type="navigateTo"
          url="/pages/history/orders"
          icon="list"
          text="历史订单"
        />
      </wd-grid>
    </view>

    <view class="mt-2 card-shadow">
      <wd-cell-group>
        <wd-cell size="large" title="知情同意书" center is-link to="/pages/profile/consentForm" />
        <wd-cell size="large" title="支持" center is-link to="/pages/profile/support"></wd-cell>
        <wd-cell size="large" title="帮助与反馈" center is-link to="/pages/profile/help"></wd-cell>
        <wd-cell size="large" title="版权说明" center is-link to="/pages/profile/notice"></wd-cell>
      </wd-cell-group>
    </view>

    <view class="mt-4 w-full">
      <wd-button type="error|icon" icon="logout" @click="logout" block>退出登录</wd-button>
    </view>

    <view class="info-text mt-20">版权所属</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

const userName = ref('用户名')
const userStore = useUserStore()
const imgSrc = ref('https://img.yzcdn.cn/vant/cat.jpeg')

const userRole = computed(() => {
  switch (userStore.userInfo.roleId) {
    case 4:
      return '普通用户'
    case 3:
      return '咨询师'
  }
})

onShow(() => {
  const userInfo = userStore.userInfo
  userName.value = userInfo.nickname
  imgSrc.value = userInfo.avatar
})

const logout = () => {
  userStore.clearUserInfo()
  uni.reLaunch({
    url: '/pages/login/index',
  })
  console.log('退出登录')
}

const toSetting = () => {
  uni.navigateTo({ url: '/pages/profile/setting' })
  console.log('跳转到设置页面')
}
</script>

<style lang="scss" scoped>
.user-name {
  font-weight: bold;
}

:deep(.all-row) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

:deep(.all-col) {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
}

:deep(.icon-button) {
  transform: scale(1.75);
}

.card-shadow {
  border-radius: 32rpx;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
  transition: box-shadow 0.3s ease-in-out;
}

.card-shadow:hover {
  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
}

.info-text {
  padding: 16rpx;
  color: #999;
  text-align: center;
}
</style>
